<template>
  <page-body>
    <view class="page">
      <view class="flex align-stretch benben-position-layout flex recommendCommodityList_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between flex-sub recommendCommodityList_fd0_0'>
          <view class='flex align-center' @tap="handleJumpDiy" data-type="back" data-url="1">
            <text class='fu-iconfont2  recommendCommodityList_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex align-center flex-sub recommendCommodityList_fd0_0_c1'>
            <text class='fu-iconfont2  recommendCommodityList_fd0_0_c1_c0'>&#xe738;</text>
            <benben-input class='flex-sub recommendCommodityList_fd0_0_c1_c1' type="text" :placeholder="`请输入关键字`"
              confirm-type="done" :maxlength="-1" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              @confirm="search()" v-model="keyword" />
            <image class='recommendCommodityList_fd0_0_c1_c2' mode="aspectFit" :src='STATIC_URL+"105.png"'
              @tap.stop="clearSearchFunc()"></image>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-between benben-flex-layout recommendCommodityList_flex_1">
        <view>
          <benben-flex-tabs class-name='recommendCommodityList_benbenTabsfd1_0' v-model="cateId" ref="benben_tabsfd1_0"
            select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false' :open-sticky='false' :top='0'
            :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0" @change="getListFunc()">

            <scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
              class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd1_0.moveX"
              scroll-with-animation="all .3s ease">
              <view class="benben-tabs-content" id="benben_tabsfd1_0-content">

                <view id="benben_tabsfd1_0-title" class="benben-tabs-title flex flex align-center justify-around">

                  <view :class="{ 'checkTitlefd1_0': cateId == '1', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '1'" :id="`benben_tabsfd1_0-title-item-${'1'}`">

                    <text>企业</text>

                  </view>
                  <view :class="{ 'checkTitlefd1_0': cateId == '3', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '3'" :id="`benben_tabsfd1_0-title-item-${'3'}`">

                    <text>职业</text>

                  </view>
                  <view :class="{ 'checkTitlefd1_0': cateId == '2', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '2'" :id="`benben_tabsfd1_0-title-item-${'2'}`">

                    <text>自由</text>

                  </view>
                  <!-- <view :class="{ 'checkTitlefd1_0': cateId == '1', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '1'" :id="`benben_tabsfd1_0-title-item-${'1'}`">

                    <text>找人</text>

                  </view> -->

                  <view :class="{ 'checkTitlefd1_0': cateId == '4', 'flex flex-wrap align-center': true }"
                    @tap="cateId = '4'" :id="`benben_tabsfd1_0-title-item-${'4'}`">

                    <text>动态</text>

                  </view>
                </view>
                <view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
                  id="benben_tabsfd1_0-line"
                  class="benben-tabs-line flex benben-flex-tabs-line recommendCommodityList_linefd1_0"></view>
              </view>
            </scroll-view>

          </benben-flex-tabs>

        </view>
        <view class='flex flex-wrap align-center' @click.stop="popupShow1717141171413=true"
          v-if="cateId==2 || cateId==3">
          <image class='recommendCommodityList_fd1_1_c0' mode="aspectFit" :src='STATIC_URL+"163.png"'></image>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---反馈记录带联系人flex布局开始-->


      <!---反馈记录带联系人flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd3_0" @change="bannerIndexfd3_0 = $event.detail.current"
            class='flex position-relative recommendCommodityList_fd3_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>


            <swiper-item v-for="(item,index) in banList" :key="index" class='flex  recommendCommodityList_fd3_0'>
              <image class='recommendCommodityList_fd3_0_c1_c0' mode="aspectFill" :src='item.thumb'></image>
            </swiper-item>


          </swiper>
          <view style="position: absolute"
            class="flex dot flex align-center justify-center recommendCommodityList_swiperDotfd3_0">
            <template v-for="(item, index) in (1)">
              <view :key="index" v-if="bannerIndexfd3_0 == index"
                class="flex dot selected flex align-center justify-center recommendCommodityList_swiperDotSelectedfd3_0">
              </view>
              <view :key="index" v-else
                class="flex dot unselected flex align-center justify-center recommendCommodityList_swiperDotUnselectedfd3_0">
              </view>
            </template>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if=" cateId=='4'">
        <view class='flex flex-wrap align-start recommendCommodityList_fd2_0' v-for='(item,key0) in dataList'
          :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/homePage/dongDetail/dongDetail?id=${item.aid}`">
          <image class='recommendCommodityList_fd2_0_c0' mode="aspectFill" :src='item.avatar'></image>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub recommendCommodityList_fd2_0_c1'>
            <view class='flex flex-wrap align-center justify-between recommendCommodityList_fd2_0_c1_c0'
              @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/grzx/userHome/userHome?aid=${item.user_id}`">
              <view class='flex flex-direction flex-wrap align-stretch recommendCommodityList_fd2_0_c1_c0_c0'>
                <text class='recommendCommodityList_fd2_0_c1_c0_c0_c0'>{{item.user_name}}</text>
                <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c0_c0_c1'>
                  <text class="text-lg margin-right-sm">{{item.company_name}}</text>
                  <text class='recommendCommodityList_fd2_0_c1_c0_c0_c1_c1'>{{item.zhiye}}</text>
                </view>
              </view>
              <view class='flex flex-wrap align-center' @click.stop="collect(item)">
                <text class='recommendCommodityList_fd2_0_c1_c0_c1_c0'>{{item.is_follow==0 ? '+关注' : '已关注'}}</text>
              </view>
            </view>
            <view class='flex flex-direction flex-wrap align-stretch recommendCommodityList_fd2_0_c1_c1'>
              <view class='flex-sub recommendCommodityList_fd2_0_c1_c1_c0'>
                <text class='recommendCommodityList_fd2_0_c1_c1_c0_c0'>{{item.title}}</text>
              </view>
            </view>
            <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2' v-if="item.postType=='image'">
              <template v-for='(child,key1) in item.thumb'>
                <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2_c0' :key='key1'>
                  <image class='recommendCommodityList_fd2_0_c1_c2_c0_c0' mode="aspectFill" :src='child'
                    @tap.stop="multiImagePreview(child,item.thumb,'')"></image>
                </view>
              </template>

            </view>
            <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2' v-if="item.postType=='video'">
              <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2_c0'>
                <image class='recommendCommodityList_fd2_0_c1_c2_c0_c0' mode="aspectFill" :src='item.video_img'></image>
              </view>

            </view>
            <view class='flex flex-wrap align-center'>
              <text class='recommendCommodityList_fd2_0_c1_c3_c0'>{{item.create_time}}</text>
              <!-- <text class='recommendCommodityList_fd2_0_c1_c3_c1'>{{item.create_time}}</text> -->
            </view>
            <view class='flex flex-wrap align-center justify-between recommendCommodityList_fd2_0_c1_c4'>
              <view class='flex flex-wrap align-center'>
                <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' mode="aspectFit" :src='STATIC_URL+"158.png"'>
                </image>
                <text class='recommendCommodityList_fd2_0_c1_c4_c0_c1'>{{item.share_count }}</text>
              </view>
              <view class='flex flex-wrap align-center'>
                <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' mode="aspectFit" :src='STATIC_URL+"159.png"'>
                </image>
                <text class='recommendCommodityList_fd2_0_c1_c4_c0_c1'>{{item.comment_count }}</text>
              </view>
              <view class='flex flex-wrap align-center ' @click.stop="like(item)">
                <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' v-if="item.isLike==1" mode="aspectFit"
                  :src='STATIC_URL+"161.png"'>
                </image>
                <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' v-if="item.isLike==0" mode="aspectFit"
                  :src='STATIC_URL+"189.png"'>
                </image>
                <text class='recommendCommodityList_fd2_0_c1_c4_c0_c1'>{{item.like_count }}</text>
              </view>
            </view>
          </view>
        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center" v-if="cateId==2 || cateId==3">
        <view class='flex flex-wrap align-center justify-between recommendCommodityList_fd4_0'
          v-for="(item,index) in dataList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/grzx/userHome/userHome?aid=${item.id}`">
          <view class='flex flex-wrap align-center flex-sub'>
            <image class='recommendCommodityList_fd4_0_c0_c0' mode="aspectFill" :src='item.avatar'></image>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub recommendCommodityList_fd4_0_c0_c1'>
              <view class='flex flex-wrap align-end'>
                <text class='recommendCommodityList_fd4_0_c0_c1_c0_c0'>{{item.nickname}}</text>
                <text class='recommendCommodityList_fd4_0_c0_c1_c0_c1'>{{item.distance}}</text>
              </view>
              <view class='flex flex-wrap align-center'>
                <text class='text-333 margin-right-sm'>{{item.mingcheng}}</text>
                <text class=' recommendCommodityList_fd4_0_c0_c1_c1_c0'>{{item.zhiye}}</text>
              </view>
              <view class='flex flex-wrap align-center'>
                <text class='recommendCommodityList_fd4_0_c0_c1_c2_c0'
                  v-for="(itemC,indexC) in item.freeindustryattributes_name" v-if="indexC<2"
                  :key="indexC">{{itemC}}</text>
              </view>
            </view>
          </view>
          <view class='flex flex-wrap align-center' @click.stop="collect(item)">
            <text>{{item.is_follow==0 ? '+关注' : '已关注'}}</text>
          </view>
        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>
      <view class="flex benben-flex-layout flex-wrap align-center" v-if="cateId==1">
        <view class='flex flex-wrap align-center justify-between recommendCommodityList_fd4_0'
          v-for="(item,index) in dataList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
          :data-url="`/pages/homePage/enterpriseDetails/enterpriseDetails?aid=${item.company_id}`">
          <view class='flex flex-wrap align-center flex-sub'>
            <image class='recommendCommodityList_fd4_0_c0_c0' mode="aspectFill" :src='item.logo'></image>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub recommendCommodityList_fd4_0_c0_c1'>
              <view class='flex flex-wrap align-end'>
                <text class='recommendCommodityList_fd4_0_c0_c1_c0_c0'>{{item.mingcheng}}</text>
                <text class='recommendCommodityList_fd4_0_c0_c1_c0_c1'>{{item.distance}}</text>
              </view>
              <!--   <view class='flex flex-wrap align-center'>
                <text class='text-333 margin-right-sm'>{{item.mingcheng}}</text>
                <text class=' recommendCommodityList_fd4_0_c0_c1_c1_c0'>{{item.zhiye}}</text>
              </view> -->
              <view class='flex flex-wrap align-center margin-top-sm'>
                <text class='recommendCommodityList_fd4_0_c0_c1_c2_c0'
                  v-for="(itemC,indexC) in item.company_service_list" v-if="indexC<2" :key="indexC">{{itemC}}</text>
              </view>
            </view>
          </view>

        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>
      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1717141171413" :mask="true" :mask-close-able="true" mode='right' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view class='flex flex-direction flex-wrap align-stretch recommendCommodityList_fd5_0'>
            <text class='recommendCommodityList_fd5_0_c0'>筛选</text>
            <text class='recommendCommodityList_fd5_0_c1'>行业属性</text>
            <view class='flex flex-wrap   heigh-box'>
              <view class='flex flex-wrap align-center justify-center recommendCommodityList_fd5_0_c2_c0'
                :class="dustry_id==item.aid? 'active' : ''" v-for="(item,index) in hyList" :key="index"
                @click.stop='choosehy(item)'>
                <text>{{item.name}}</text>
              </view>
            </view>
            <view class='flex align-center justify-between recommendCommodityList_fd5_0_c3'>
              <button class='recommendCommodityList_fd5_0_c3_c0' @tap.stop="clearS">重置</button>
              <button class='recommendCommodityList_fd5_0_c3_c1' @tap.stop="search">确认</button>
            </view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>


    </view>
  </page-body>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "popupShow1717141171413": false,
        "bannerIndexfd3_0": 0,
        "tabsInfofd1_0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "cateId": "1",
        "keyword": "",
        "cid": "",
        keywords: '',
        dustry_id: '',
        hyList: [],
        dataList: [],
        banList: [],

      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let {
        keyword,
        cid,
        cateId
      } = options
      if (keyword !== undefined) this.keyword = keyword
      if (cid !== undefined) this.cid = cid
      if (cateId !== undefined) this.cateId = cateId
      this.getData()
      this.getListFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      // this.getListFunc()
      // this.getUserListFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      like(item) {
        this.$api.post(global.apiUrls.post6459b3da18828, {
          post_id: item.aid
        }).then(res => {
          if (res.data.code == 1) {
            if (item.isLike == 1) {
              item.isLike = 0
              item.like_count = item.like_count - 1
            } else {
              item.isLike = 1
              item.like_count = item.like_count + 1
            }
            console.log(item.isLike)
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      collect(item) {
        this.$api.post(global.apiUrls.post66505b8b64564, {
          user_id: item.id
        }).then(res => {
          if (res.data.code == 1) {
            if (item.is_follow == 1) {
              item.is_follow = 0
            } else {
              item.is_follow = 1
            }
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      getData() {
        this.$api.post(global.apiUrls.post664eb892f02d1).then(res => {
          if (res.data.code == 1) {
            this.hyList = res.data.data
          }
        })
        this.$api.post(global.apiUrls.post641e624160dd0, {
          type: 1
        }).then(res => {
          if (res.data.code == 1) {
            this.banList = res.data.data
          }
        })
      },
      choosehy(item) {
        this.dustry_id = item.aid
        // item.is_show = !item.is_show
      },
      //是否显示显示全部下拉弹窗
      search() {
        this.popupShow1717141171413 = false
        this.getListFunc()
      },

      clearS() {
        this.getData()
        this.popupShow1717141171413 = false
        this.getListFunc()
      },


      //清除搜索框
      clearSearchFunc() {
        this.keyword = '';
        this.getListFunc()
      },
      //用户管理-意见反馈记录
      getListFunc() {
        let dataUrls = ''
        let dataMsg = {
          keywords: this.keyword
        }
        if (this.cateId == 1) {
          dataUrls = global.apiUrls.post6651b78154bee
          // dataUrls = global.apiUrls.post6651b71c80939
          // // this.dustry_id = this.hyList.filter(item => {
          // //   return item.is_show
          // // }).map(itemC => {
          // //   return itemC.aid
          // // }).join(',')
          // console.log(' this.dustry_id', this.dustry_id)
          // dataMsg.dustry_id = this.dustry_id
        } else if (this.cateId == 2 || this.cateId == 3) {
          dataUrls = global.apiUrls.post6651b71c80939
          dataMsg.dustry_id = this.dustry_id
          dataMsg.user_group = this.cateId
        } else {
          dataUrls = global.apiUrls.post6458a3d122c06
        }
        this.minixPagingListsApi = dataUrls;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = dataMsg
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .recommendCommodityList_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .recommendCommodityList_fd0_0_c1_c2 {
    width: 20rpx;
    height: 20rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd0_0_c1_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
  }

  .recommendCommodityList_fd0_0_c1_c0 {
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
    margin: 0rpx 14rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd0_0_c1 {
    background: #F9F9F9;
    height: 64rpx;
    border-radius: 34rpx 34rpx 34rpx 34rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .recommendCommodityList_fd0_0_c0_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }

  .recommendCommodityList_fd0_0 {
    padding: 0rpx 24rpx 0rpx 24rpx;
    line-height: 88rpx;
  }

  .recommendCommodityList_flex_1 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .recommendCommodityList_fd1_1_c0 {
    width: 30rpx;
    height: 30rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .recommendCommodityList_linefd1_0 {
    background: var(--benbenbgColor2);
    width: 100rpx;
    height: 8rpx;
    top: 70rpx;
    background-size: 100% auto !important;
    border-radius: 44rpx;
  }

  .checkTitlefd1_0 {
    font-weight: 700 !important;
    font-size: 28rpx !important;
    color: #5ECA71 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .recommendCommodityList_benbenTabsfd1_0 {
    background: #fff;
    width: 350rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
  }

  .recommendCommodityList_fd2_0_c1_c4_c0_c1 {
    color: var(--benbenFontColor2);
  }

  .recommendCommodityList_fd2_0_c1_c4_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c4 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c3_c1 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: var(--benbenFontColor2);
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .recommendCommodityList_fd2_0_c1_c3_c0 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: var(--benbenFontColor2);
  }

  .recommendCommodityList_fd2_0_c1_c2_c0_c0 {
    width: 180rpx;
    height: 180rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .recommendCommodityList_fd2_0_c1_c2_c0 {
    margin: 12rpx 8rpx 12rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c2 {
    padding: 12rpx 0rpx 0rpx 8rpx;
  }

  .recommendCommodityList_fd2_0_c1_c1_c0_c0 {
    line-height: 46rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    padding: 0rpx 30rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c1_c0 {
    color: rgba(119, 119, 119, 1);
  }

  .recommendCommodityList_fd2_0_c1_c1 {
    position: relative;
    padding: 0rpx 0rpx 0rpx 16rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c1_c0 {
    font-size: 24rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0_c1_c1 {
    color: var(--benbenFontColor2);
    // margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0_c1 {
    font-size: 28rpx;
    margin: 06rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0_c0 {
    // font-weight: 600;
    font-size: 32rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0 {
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0 {
    margin: 0rpx 0rpx 12rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1 {
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c0 {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
  }

  .recommendCommodityList_fd2_0 {
    border-bottom: 1px solid #eee;
    padding: 24rpx;
    width: 702rpx;
    margin: 24rpx auto 0rpx auto;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
  }

  .recommendCommodityList_numberfd3_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .recommendCommodityList_fd3_0_c1_c0 {
    width: 100%;
    height: 100%;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd3_0 {
    width: 750rpx;
    height: 180rpx;
  }

  .recommendCommodityList_swiperDotUnselectedfd3_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .recommendCommodityList_swiperDotSelectedfd3_0 {
    border: 1px solid var(--benbenbdColor1);
    background: var(--benbenbgColor1);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor3);
  }

  ::v-deep .recommendCommodityList_swiperDotfd3_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .recommendCommodityList_fd4_0_c0_c1_c2_c0 {
    border: 1px solid #ED914A;
    background: #FFFFFF;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: var(--benbenFontColor6);
    font-size: 28rpx;
    padding: 6rpx 10rpx 6rpx 10rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd4_0_c0_c1_c1_c0 {
    font-size: 24rpx;
    color: rgba(170, 170, 170, 1);
    margin: 8rpx 0rpx 8rpx 0rpx;
  }

  .recommendCommodityList_fd4_0_c0_c1_c0_c1 {
    color: rgba(170, 170, 170, 1);
    font-size: 24rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .recommendCommodityList_fd4_0_c0_c1_c0_c0 {
    font-size: 30rpx;
    font-weight: 600;
  }

  .recommendCommodityList_fd4_0_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .recommendCommodityList_fd4_0_c0_c0 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 16rpx;
  }

  .recommendCommodityList_fd4_0 {
    background: #FFFFFF;
    margin: 24rpx auto 0rpx auto;
    width: 686rpx;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx;
  }

  .recommendCommodityList_fd5_0_c3_c1 {
    background: #5ECA71;
    border-radius: 0rpx 36rpx 36rpx 0rpx;
    width: 240rpx;
    line-height: 72rpx;
    font-size: 24rpx;
    color: #fff;
    height: 72rpx;
  }

  .recommendCommodityList_fd5_0_c3_c0 {
    background: #FFCD51;
    border-radius: 36rpx 0rpx 0rpx 36rpx;
    width: 240rpx;
    line-height: 72rpx;
    font-size: 24rpx;
    color: #fff;
    height: 72rpx;
  }

  .recommendCommodityList_fd5_0_c3 {
    margin: 50rpx 0rpx 0rpx 0rpx;
  }

  .heigh-box {
    max-height: 900rpx;
    overflow-y: scroll;
  }

  .recommendCommodityList_fd5_0_c2_c0 {
    background: #F8F8F8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 150rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 16rpx 16rpx 0rpx 0rpx;

    &.active {
      border: 1rpx solid #5ECA71;
      background-color: #FFFFFF;
      color: #5ECA71;
    }
  }

  .recommendCommodityList_fd5_0_c1 {
    font-size: 36rpx;
    font-weight: 500;
    margin: 35rpx 0rpx 35rpx 0rpx;
  }

  .recommendCommodityList_fd5_0_c0 {
    font-size: 36rpx;
    font-weight: 500;
  }

  .recommendCommodityList_fd5_0 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    padding: 24rpx;
    width: 546rpx;
    height: 100vh;
    margin: 88rpx 0rpx 0rpx 0rpx;
  }
</style>
